/**
 * Created by fengjun on 13-10-22.
 */
var SA = SA || {};
(function ($, SA) {
    var getPosition = function (dom, tagName, pos) {
        var that = this;
        if (typeof (pos) == "undefined" || pos == null) {
            pos = { x: 0, y: 0 };
        }
        if (dom.offsetParent == null || dom.offsetParent.tagName.toLowerCase() == tagName) {
            if (typeof (dom.style.borderLeftWidth) != "unknown" && dom.style.borderLeftWidth != null && dom.style.borderLeftWidth != "") {
                pos.x += parseInt(dom.offsetLeft) + parseInt(dom.style.borderLeftWidth.replace("px", ""));
                pos.y += parseInt(dom.offsetTop) + parseInt(dom.style.borderTopWidth.replace("px", ""));
                return pos;
            }
            else {
                pos.x += parseInt(dom.offsetLeft);
                pos.y += parseInt(dom.offsetTop);
            }
            return pos;
        } else {
            if (typeof (dom.style.borderLeftWidth) != "unknown" && dom.style.borderLeftWidth != null && dom.style.borderLeftWidth != "") {
                pos.x += parseInt(dom.offsetLeft) + parseInt(dom.style.borderLeftWidth.replace("px", ""));
                pos.y += parseInt(dom.offsetTop) + parseInt(dom.style.borderTopWidth.replace("px", ""));
                return pos;
            }
            else {
                pos.x += parseInt(dom.offsetLeft);
                pos.y += parseInt(dom.offsetTop);
            }
            return arguments.callee(dom.offsetParent, tagName, pos);
        }
    };
    var Silder = function (options) {
        var _options = {
            trigger: null,
            max: 100,
            min: 0,
            range: "both",//["min","max","both"]
            canvas: $(document),
            value: [0, 100],
            limit: [10, 90]
        };
        $.extend(this, _options, options);
        // if (options.trigger) {
        this._init();
        // }
    };
    Silder.prototype = {
        startHandle: null,
        endHandle: null,
        _minLimitPer: 0,
        _maxLimitPer: 1,
        _init: function () {
            var dValue = this.dValue = this.value[1] - this.value[0],
                limit = this.limit;
            if (limit[0]) {
                this._minLimitPer = limit[0] / dValue;
            }
            if (limit[1]) {
                this._maxLimitPer = limit[1] / dValue;
            }
            this._initDOM();
            this._initEvent();
        },
        _initDOM: function () {
            var rule = this.rule = $('<div class="ui-slider"></div>'),
                rangeDiv = this.rangeDiv = $('<div class="ui-slider-range"></div>').css({
                    left: this._minLimitPer * 100 + "%",
                    width: (this._maxLimitPer - this._minLimitPer) * 100 + "%"
                }),
                handleTemp = '<a class="ui-slider-handle" href="javascript:void(0)"></a>',
                range = this.range;
            if (range === "min" || range === "both") {
                var startHandle = this.startHandle = $(handleTemp).css({
                    left: this._minLimitPer * 100 + "%"
                });
                rule.append(startHandle);
            }
            if (range === "max" || range === "both") {
                var endHandle = this.endHandle = $(handleTemp).addClass("blue").css({
                    left: this._maxLimitPer * 100 + "%"
                });
                rule.append(endHandle);
            }
            this.trigger.append(rule.append(rangeDiv));
        },
        _initEvent: function () {
            var self = this,
                $canvas = self.canvas,
                $startHandle = self.startHandle,
                startHandle = null,
                $endHandle = self.endHandle,
                endHandle = null,
                rule = self.rule[0],
                rangeDiv = self.rangeDiv[0],
                minLimitPer = self._minLimitPer,
                maxLimitPer = self._maxLimitPer;
            var start = minLimitPer,
                end = maxLimitPer;
            var setStartLeft = function (e) {
                var left = e.pageX,
                    min = getPosition(rule, "DIV").x,
                    max = rule.offsetWidth,
                    per = (left - min) / max;
                start = per < minLimitPer ? minLimitPer : (per > end ? end : per);
                rangeDiv.style.left = startHandle.style.left = start * 100 + "%";
                rangeDiv.style.width = (end - start) * 100 + "%";
            };
            if ($startHandle !== null) {
                startHandle = $startHandle[0];
                $startHandle.bind("dragstart", function (e) {
                    this.style.zIndex = 3;
                    endHandle && (endHandle.style.zIndex = 2);
                    $canvas.bind("mousemove", setStartLeft);
                    e.preventDefault();
                });
                $canvas.bind("mouseup mouseleave", function (e) {
                    $canvas.unbind("mousemove", setStartLeft);
                });
            }

            var setEndLeft = function (e) {
                var left = e.pageX,
                    min = getPosition(rule, "DIV").x,
                    max = rule.offsetWidth,
                    per = (left - min) / max;
                end = per < start ? start : (per > maxLimitPer ? maxLimitPer : per);
                endHandle.style.left = end * 100 + "%";
                rangeDiv.style.width = (end - start) * 100 + "%";
            };
            if ($endHandle !== null) {
                endHandle = $endHandle[0];
                $endHandle.bind("dragstart", function (e) {
                    this.style.zIndex = 3;
                    startHandle && (startHandle.style.zIndex = 2);
                    $canvas.bind("mousemove", setEndLeft);
                    e.preventDefault();
                });
                $canvas.bind("mouseup mouseleave", function (e) {
                    $canvas.unbind("mousemove", setEndLeft);
                });
            }
        }
    };
    SA.Silder = Silder;
})(jQuery, SA);